<template>
  <el-row :gutter="20">
    <el-col span="2"><div style="background-color: #b3c0d1"></div></el-col>
    <el-col span="10">
      <el-card style="height:700px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="计划标题">
            <el-input v-model="form.planTitle"></el-input>
          </el-form-item>
          <el-form-item label="需求部门">
            <el-select v-model="form.planFor" placeholder="请选择">
                          <el-option
                            v-for="item in depts"
                            :key="item.deptId"
                            :label="item.deptName"
                            :value="item.deptName"
                          >
                          </el-option>
                        </el-select>
            <!-- <el-input v-model="form.planFor"></el-input> -->
          </el-form-item>
          <el-form-item label="收集部门">
            <el-input v-model="form.planCollect"></el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :beforeUpload="beforeAvatarUpload"
            :http-request="uploadDocx"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传docx文件，且不超过10MB
            </div>
          </el-upload>
          <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit" style="float:right"
              >立即发布</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col span="1"></el-col>
    <el-col span="9">
      <el-card>
        <div style="">
          <h3>培训预算</h3>
          <div style="float: left">预算详细</div>
          <div style="float: left; margin-left: 135px">金额￥</div>
          <div style="float: left; margin-left: 155px; margin-bottom: 10px">
            <el-button @click="addBudget" size="mini" type="primary"
              >新增</el-button
            >
          </div>
          <hr style="clear: both" />
          <el-form :model="budget" ref="budget" class="demo-dynamic">
            <el-form-item
              v-for="(bud, index) in budget.nums"
              :key="bud"
              :prop="bud.index"
              style="clear: both"
            >
              <div style="float: left">
                <el-input v-model="bud.budgetName"></el-input>
              </div>
              <div style="float: left; margin-left: 10px">
                <el-input
                  v-model="bud.budgetNum"
                  @input="moneyChange"
                ></el-input>
              </div>
              <div style="float: left; margin-left: 20px">
                <el-button
                  @click="removeBudget(index)"
                  size="mini"
                  type="primary"
                  >删除</el-button
                >
              </div>
            </el-form-item>
          </el-form>
          <div style="float: left">总金额</div>
          <div style="float: left; margin-left: 155px">
            {{ form.planMoney }}￥
          </div>
        </div>
      </el-card>

      <el-card style="margin-top: 50px">
        <div style="">
          <h3>审核流程</h3>
          <div style="float: left">审核人</div>
          <div style="float: left; margin-left: 135px">截止时间</div>
          <div style="float: left; margin-left: 155px; margin-bottom: 10px">
            <el-button @click="addApprove" size="mini" type="primary"
              >新增</el-button
            >
          </div>
          <hr style="clear: both" />
          <el-form
            :model="approveRecord"
            ref="approveRecord"
            class="demo-dynamic"
          >
            <el-form-item
              v-for="(approve, index) in approveRecord.approve"
              :key="approve"
              :prop="approve.index"
              style="clear: both"
            >
              <div style="float: left">
                <el-select v-model="approve.approveUserId" placeholder="请选择" @change="selectChange(approve.approveUserId)">
                  <el-option
                    v-for="item in approver"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </div>
              <div style="float: left; margin-left: 10px">
                <el-date-picker
                  style="width:200px"
                  v-model="approve.approveEndtime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  clearable
                  placeholder="选择日期">
                </el-date-picker>
              </div>
              <div style="float: left; margin-left: 20px">
                <el-button
                  @click="removeApprove(index)"
                  size="mini"
                  type="primary"
                  >删除</el-button
                >
              </div>
            </el-form-item>
          </el-form>
          
        </div>
      </el-card>
    </el-col>
    <el-col span="2"></el-col>
  </el-row>
</template>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 600px;
}

.el-col {
  border: 1px solid transparent;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 800px;
}
.el-container {
  height: 760px;
  margin-bottom: 40px;
}
</style>
<script>
import { uploadDocx } from "@/api/plan";
import { findApprover } from "@/api/plan";
import {submit} from '@/api/plan';
import { findAllDept } from "@/api/plan";
export default {
  data() {
    return {
      depts:[],
      approver: [], //审核候选人
      fileList: [], //附件
      budget: {
        //预算
        nums: [
          {
            budgetName: "",
            budgetNum: 0,
          },
        ],
      },
      //审核人
      approveRecord: {
        approve: [
          {
            approveUserId: "",
            approveEndtime: "",
          },
        ],
      },
      form: {
        planUid:this.userId,
        planId:0,
        planMoney: 0,
        planTitle: "",
        demandInstructions: "",
        planFor:"",
        planCollect:"",
        planContent:""
      },
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.userId = this.$store.getters.userId;
      this.form.planUid = this.userId;
      findApprover([])
        .then((res) => {
          console.log(res.data);
          this.approver = res.data;
        })
        .catch();
    findAllDept()
        .then((res) => {
          console.log(res);
          this.depts = res.data;
        })
        .catch();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        "当前限制选择 1 个文件，本次已选择了 ${files.length} 个文件"
        // ，共选择了 ${
        //   files.length + fileList.length
        // } 个文件
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //上传
    uploadDocx(param) {
      const formdata = new FormData();
      // formdata.append("userId", this.form.userId);
      formdata.append("file", param.file);
      uploadDocx(formdata).then((res) => {
        this.form.planContent = res.data; //将返回的url地址存在docxUrl中，计划提交时用
        // this.form.userHeadImg = res.data;
        console.log(res);
      });
    },
    //限制上传文档类型和大小
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "docx";
      //const extension2 = testmsg === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension) {
        this.$message({
          message: "上传文件只能是 docx格式!",
          type: "warning",
        });
      }
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过 10MB!",
          type: "warning",
        });
      }
      return extension && isLt2M;
    },
    //增加预算内容
    addBudget() {
      this.budget.nums.push({
        budgetName: "",
        budgetNum: 0,
      });
    },
    //删除预算内容
    removeBudget(index) {
      this.budget.nums.splice(index, 1);
      this.moneyChange();
    },
    //随时更改总金额
    moneyChange() {
      let index;
      let money = 0;
      for (index in this.budget.nums) {
        console.log(index);
        money += Number(this.budget.nums[index].budgetNum);
      }
      this.form.planMoney = money;
    },
    //增加审核人
    addApprove() {
      console.log(123456);
      console.log(this.approveRecord.approve)
      this.approveRecord.approve.push({
        approveUserId: "",
        approveEndtime: "",
      });
      findApprover(this.approveRecord.approve)
        .then((res) => {
          console.log(res.data);
          this.approver = res.data;
        })
        .catch();
    },
    //删除审核人
    removeApprove(index) {
      this.approveRecord.approve.splice(index, 1);
      findApprover(this.approveRecord.approve)
        .then((res) => {
          console.log(res.data);
          this.approver = res.data;
        })
        .catch();
    },
    //审核人选择更改
    selectChange(){
      findApprover(this.approveRecord.approve)
        .then((res) => {
          console.log(res.data);
          this.approver = res.data;
        })
        .catch();
    },
    //提交
    onSubmit(){
      console.log(this.form)
      submit({
        etmsPlan:this.form,
        budgets:this.budget.nums,
        approveRecords:this.approveRecord.approve
      }).then(res => {
        this.$router.push({
        name:'PlanHome',
      });
        console.log(res)
      }
      ).catch();
    }
  },
};
</script>
